<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初始vue</title>
    <script type="text/javascript"  src="../js/vue.js"></script>
</head>


<body>
    <div id="root">
        <h1>学校名称 {{school.name}}</h1>
        <h1>学校地址 {{school.address}}</h1>
        <h1>校长是 {{school.leader}}</h1>
        <h1>真实年龄 {{student.age.rAge}}</h1>
        <h1>对外年龄 {{student.age.sAge}}</h1>
        <button @click="addSex">添加一个性别</button>
        <button @click="addLeader">添加一个校长信息</button>

        <h1 v-if="student.sex">性别 {{student.sex}}</h1>
        <ul>
            <li v-for="(f,index) in student.friends" :key="index">{{f.name}} -- {{f.age}}</li>
        </ul>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip=false;
     const vm =new Vue({
        el:"#root",
        data(){ 
            return{
               
                school:{
                 name:"JJ",
                address:"清华"
                },
                student:{
                    name:"tom",
                    age:{
                        rAge:30,
                        sAge:18
                    }
                    ,
                friends:[
                {
                    name:"joy",
                    age:35
                },
                {
                    name:"LJJ",
                    age:34
                }
                ]
                }
            }
        },
                methods :{
                    addSex(){
                        // Vue.set(this.student,'sex','男')
                        this.$set(this.student,'sex','男')

                    },
                    addLeader(){
                        this.$set(this.school,'leader','总经理')//注意target对象不能是 Vue 实例，或者 Vue 实例的根数据对象
                    }
                }
    })
</script>
</html>